import React, { useEffect, useState } from 'react'
import { Tabbar } from 'react-vant';
import { ChatO, HomeO, Search, LikeO, UserO } from '@react-vant/icons'
import { useLocation, useNavigate } from 'react-router-dom';

const NavBar = () => {

  const { pathname } = useLocation()
  const [name, setName] = useState('/')
  const navigate = useNavigate()


  useEffect(() => {
    setName(pathname)
  }, [name])

  const changeTab = (name) => {
    setName(name)
    console.log(name);
    navigate(name)
  }
  return (

    <Tabbar value={name} onChange={changeTab}>
      <Tabbar.Item name='/' icon={<HomeO />}>首页</Tabbar.Item>
      <Tabbar.Item name='/info' icon={<LikeO />}>收藏</Tabbar.Item>
      <Tabbar.Item name='/message' icon={<ChatO />}>消息</Tabbar.Item>
      <Tabbar.Item name='/user' icon={<UserO />}>我的</Tabbar.Item>
    </Tabbar>
  )
}
export default NavBar
